<template>
   <div class="glass-profile-page">
      <!-- Enhanced Page Header -->
      <div class="enhanced-page-header">
         <div class="header-background">
            <div class="bg-decoration bg-decoration-1"></div>
            <div class="bg-decoration bg-decoration-2"></div>
            <div class="bg-decoration bg-decoration-3"></div>
         </div>
         <div class="header-content">
            <div class="header-main">
               <div class="title-section">
                  <div class="title-icon-wrapper">
                     <div class="title-icon">
                        <svg-icon icon-class="user" />
                     </div>
                     <div class="icon-glow"></div>
                  </div>
                  <div class="title-content">
                     <h1 class="main-title">个人中心</h1>
                     <p class="sub-title">Personal Profile - 个人信息管理</p>
                     <div class="title-underline"></div>
                  </div>
               </div>
               <div class="header-stats">
                  <div class="stat-item">
                     <div class="stat-icon">
                        <svg-icon icon-class="date" />
                     </div>
                     <div class="stat-content">
                        <span class="stat-label">最后登录</span>
                        <span class="stat-value">{{ formatLastLogin() }}</span>
                     </div>
                  </div>
                  <div class="stat-item">
                     <div class="stat-icon">
                        <svg-icon icon-class="peoples" />
                     </div>
                     <div class="stat-content">
                        <span class="stat-label">在线状态</span>
                        <span class="stat-value online">在线</span>
                     </div>
                  </div>
               </div>
            </div>
            <div class="header-actions">
               <div class="action-button" @click="refreshProfile">
                  <svg-icon icon-class="refresh" />
                  <span>刷新</span>
               </div>
            </div>
         </div>
      </div>

      <el-row :gutter="24" class="profile-content">
         <!-- User Info Card -->
         <el-col :span="8" :xs="24">
            <div class="glass-card profile-info-card">
               <div class="card-header">
                  <h3>个人信息</h3>
               </div>
               <div class="card-content">
                  <div class="avatar-section">
                     <userAvatar />
                  </div>
                  <div class="info-list">
                     <div class="info-item">
                        <div class="info-icon">
                           <svg-icon icon-class="user" />
                        </div>
                        <div class="info-content">
                           <span class="info-label">用户名称</span>
                           <span class="info-value">{{ state.user.userName }}</span>
                        </div>
                     </div>
                     <div class="info-item">
                        <div class="info-icon">
                           <svg-icon icon-class="phone" />
                        </div>
                        <div class="info-content">
                           <span class="info-label">手机号码</span>
                           <span class="info-value">{{ state.user.phonenumber }}</span>
                        </div>
                     </div>
                     <div class="info-item">
                        <div class="info-icon">
                           <svg-icon icon-class="email" />
                        </div>
                        <div class="info-content">
                           <span class="info-label">用户邮箱</span>
                           <span class="info-value">{{ state.user.email }}</span>
                        </div>
                     </div>
                     <div class="info-item">
                        <div class="info-icon">
                           <svg-icon icon-class="tree" />
                        </div>
                        <div class="info-content">
                           <span class="info-label">所属部门</span>
                           <span class="info-value" v-if="state.user.dept">{{ state.user.dept.deptName }} / {{ state.postGroup }}</span>
                        </div>
                     </div>
                     <div class="info-item">
                        <div class="info-icon">
                           <svg-icon icon-class="peoples" />
                        </div>
                        <div class="info-content">
                           <span class="info-label">所属角色</span>
                           <span class="info-value">{{ state.roleGroup }}</span>
                        </div>
                     </div>
                     <div class="info-item">
                        <div class="info-icon">
                           <svg-icon icon-class="date" />
                        </div>
                        <div class="info-content">
                           <span class="info-label">创建日期</span>
                           <span class="info-value">{{ state.user.createTime }}</span>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </el-col>

         <!-- Profile Settings -->
         <el-col :span="16" :xs="24">
            <div class="glass-card profile-settings-card">
               <div class="card-header">
                  <h3>账户设置</h3>
               </div>
               <div class="card-content">
                  <div class="glass-tabs">
                     <el-tabs v-model="selectedTab" class="profile-tabs">
                        <el-tab-pane label="基本资料" name="userinfo">
                           <userInfo :user="state.user" />
                        </el-tab-pane>
                        <el-tab-pane label="修改密码" name="resetPwd">
                           <resetPwd />
                        </el-tab-pane>
                     </el-tabs>
                  </div>
               </div>
            </div>
         </el-col>
      </el-row>
   </div>
</template>

<script setup name="Profile">
import userAvatar from "./userAvatar"
import userInfo from "./userInfo"
import resetPwd from "./resetPwd"
import { getUserProfile } from "@/api/system/user"

const route = useRoute()
const selectedTab = ref("userinfo")
const state = reactive({
  user: {},
  roleGroup: {},
  postGroup: {}
})

function getUser() {
  getUserProfile().then(response => {
    state.user = response.data
    state.roleGroup = response.roleGroup
    state.postGroup = response.postGroup
  })
}

function formatLastLogin() {
  if (state.user.loginDate) {
    const date = new Date(state.user.loginDate)
    const now = new Date()
    const diff = now - date
    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
    
    if (days === 0) {
      return '今天'
    } else if (days === 1) {
      return '昨天'
    } else if (days < 7) {
      return `${days}天前`
    } else {
      return date.toLocaleDateString()
    }
  }
  return '未知'
}

function refreshProfile() {
  getUser()
  ElMessage.success('个人信息已刷新')
}

onMounted(() => {
  const activeTab = route.params && route.params.activeTab
  if (activeTab) {
    selectedTab.value = activeTab
  }
  getUser()
})
</script>

<style scoped lang="scss">
@import '@/assets/styles/system-pages.scss';

.glass-profile-page {
  padding: 24px;
  min-height: 100vh;
  
  // Enhanced Page Header Styles
  .enhanced-page-header {
    position: relative;
    margin-bottom: 32px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, 
      rgba(255, 255, 255, 0.25) 0%, 
      rgba(255, 255, 255, 0.15) 50%, 
      rgba(255, 255, 255, 0.1) 100%);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(31, 38, 135, 0.2);
    
    .header-background {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      
      .bg-decoration {
        position: absolute;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
        opacity: 0.1;
        animation: float 6s ease-in-out infinite;
        
        &.bg-decoration-1 {
          width: 200px;
          height: 200px;
          top: -50px;
          right: -50px;
          animation-delay: 0s;
        }
        
        &.bg-decoration-2 {
          width: 150px;
          height: 150px;
          bottom: -30px;
          left: -30px;
          animation-delay: 2s;
        }
        
        &.bg-decoration-3 {
          width: 100px;
          height: 100px;
          top: 50%;
          right: 20%;
          animation-delay: 4s;
        }
      }
    }
    
    .header-content {
      position: relative;
      z-index: 2;
      padding: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .header-main {
        display: flex;
        align-items: center;
        gap: 48px;
        flex: 1;
        
        .title-section {
          display: flex;
          align-items: center;
          gap: 20px;
          
          .title-icon-wrapper {
            position: relative;
            
            .title-icon {
              width: 64px;
              height: 64px;
              border-radius: 16px;
              background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              z-index: 2;
              box-shadow: 0 8px 25px rgba(196, 149, 108, 0.3);
              
              svg {
                font-size: 28px;
                color: white;
              }
            }
            
            .icon-glow {
              position: absolute;
              top: -4px;
              left: -4px;
              right: -4px;
              bottom: -4px;
              border-radius: 20px;
              background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
              opacity: 0.3;
              filter: blur(8px);
              animation: pulse 2s ease-in-out infinite;
            }
          }
          
          .title-content {
            .main-title {
              font-size: 32px;
              font-weight: 700;
              background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              margin: 0 0 8px 0;
              text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            
            .sub-title {
              font-size: 16px;
              color: var(--text-secondary);
              margin: 0 0 12px 0;
              font-weight: 500;
            }
            
            .title-underline {
              width: 60px;
              height: 4px;
              background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
              border-radius: 2px;
              animation: expand 1s ease-out;
            }
          }
        }
        
        .header-stats {
          display: flex;
          gap: 24px;
          
          .stat-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            
            &:hover {
              background: rgba(255, 255, 255, 0.15);
              transform: translateY(-2px);
              box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            }
            
            .stat-icon {
              width: 40px;
              height: 40px;
              border-radius: 10px;
              background: linear-gradient(135deg, var(--accent-orange), var(--accent-amber));
              display: flex;
              align-items: center;
              justify-content: center;
              
              svg {
                font-size: 18px;
                color: white;
              }
            }
            
            .stat-content {
              display: flex;
              flex-direction: column;
              gap: 2px;
              
              .stat-label {
                font-size: 12px;
                color: var(--text-secondary);
                font-weight: 500;
              }
              
              .stat-value {
                font-size: 14px;
                color: var(--text-primary);
                font-weight: 600;
                
                &.online {
                  color: var(--accent-success);
                }
              }
            }
          }
        }
      }
      
      .header-actions {
        .action-button {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 12px 20px;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 12px;
          color: var(--text-primary);
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;
          backdrop-filter: blur(10px);
          
          &:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
          }
          
          &:active {
            transform: translateY(0);
          }
          
          svg {
            font-size: 16px;
            transition: transform 0.3s ease;
          }
          
          &:hover svg {
            transform: rotate(180deg);
          }
        }
      }
    }
  }
  
  .profile-content {
    margin-top: 24px;
  }
  
  .profile-info-card {
    .avatar-section {
      text-align: center;
      padding: 24px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      margin-bottom: 24px;
    }
    
    .info-list {
      .info-item {
        display: flex;
        align-items: center;
        padding: 16px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        
        &:last-child {
          border-bottom: none;
        }
        
        .info-icon {
          width: 40px;
          height: 40px;
          border-radius: 10px;
          background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          
          svg {
            font-size: 18px;
            color: white;
          }
        }
        
        .info-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 4px;
          
          .info-label {
            font-size: 12px;
            color: var(--text-secondary);
            font-weight: 500;
          }
          
          .info-value {
            font-size: 14px;
            color: var(--text-primary);
            font-weight: 600;
          }
        }
      }
    }
  }
  
  .profile-settings-card {
    .glass-tabs {
      :deep(.el-tabs__header) {
        margin-bottom: 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        
        .el-tabs__nav-wrap::after {
          display: none;
        }
        
        .el-tabs__item {
          color: var(--text-secondary);
          font-weight: 500;
          padding: 0 24px;
          height: 48px;
          line-height: 48px;
          
          &.is-active {
            color: var(--accent-primary);
            background: rgba(196, 149, 108, 0.1);
            border-radius: 8px 8px 0 0;
          }
          
          &:hover {
            color: var(--accent-primary);
          }
        }
        
        .el-tabs__active-bar {
          background: var(--accent-primary);
          height: 3px;
          border-radius: 2px;
        }
      }
      
      :deep(.el-tabs__content) {
        padding: 0;
      }
    }
  }
}

// Animation Keyframes
@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.05);
  }
}

@keyframes expand {
  0% {
    width: 0;
  }
  100% {
    width: 60px;
  }
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

// Responsive Design
@media (max-width: 1200px) {
  .glass-profile-page {
    .enhanced-page-header {
      .header-content {
        .header-main {
          gap: 32px;
          
          .header-stats {
            gap: 16px;
          }
        }
      }
    }
  }
}

@media (max-width: 992px) {
  .glass-profile-page {
    .enhanced-page-header {
      .header-content {
        flex-direction: column;
        gap: 24px;
        align-items: stretch;
        
        .header-main {
          flex-direction: column;
          gap: 24px;
          align-items: center;
          text-align: center;
          
          .title-section {
            flex-direction: column;
            gap: 16px;
            text-align: center;
          }
          
          .header-stats {
            justify-content: center;
            flex-wrap: wrap;
          }
        }
        
        .header-actions {
          align-self: center;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .glass-profile-page {
    padding: 16px;
    
    .enhanced-page-header {
      .header-content {
        padding: 24px 20px;
        
        .header-main {
          .title-section {
            .title-content {
              .main-title {
                font-size: 28px;
              }
              
              .sub-title {
                font-size: 14px;
              }
            }
          }
          
          .header-stats {
            .stat-item {
              padding: 12px 16px;
              
              .stat-icon {
                width: 36px;
                height: 36px;
                
                svg {
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
    }
    
    .profile-content {
      .el-col {
        margin-bottom: 24px;
      }
    }
  }
}
</style>
